<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true">
          <el-form-item :label="$t('financial.Device_number')">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.equipmentNumber" style="width: 200px;" class="filter-item" :placeholder="$t('financial.Please_enter_the_device_number')" >
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('financial.Search')}}</el-button>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="dialog.add=true">{{$t('financial.Add')}}</el-button>
      </el-form>          
    </div>
   <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="waiting..." border fit highlight-current-row
      style="width: 100%">
      <el-table-column  :label="$t('financial.Serial_number')" prop="index" />
      <el-table-column  :label="$t('financial.Device_number')" prop="equipmentNumber"/>
      <el-table-column  :label="$t('financial.Device_type')" prop="equipmentType">
        <template slot-scope="scope">
          <span v-if='scope.row.equipmentType'>{{scope.row.equipmentType == 1 ? '机柜':scope.row.equipmentType == 2 ? '充电宝':''}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Price')">
        <template slot-scope="scope">
          {{scope.row.price + '元'}}
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Purchase_time')" prop="buyTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.buyTime">{{scope.row.buyTime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('financial.Operate')">
        <template slot-scope="scope">
          <el-button type="text" @click="dialog.update=true, editor(scope.row)">{{$t('financial.Edit')}}</el-button>
          <el-button type="text" @click="updateWorkIsFlag(scope.row.id)">{{$t('financial.Delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  <!--新增弹窗-->
    <el-dialog :title="$t('financial.Add')" :visible.sync="dialog.add">
      <el-form :model="bindQuery" :rules='bindRules' ref="bindForm" label-position="right" label-width="120px"> 
        <el-form-item :label="$t('financial.Device_number')" prop="equipmentNumber">
          <el-input  clearable v-model="bindQuery.equipmentNumber" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Device_type')" prop="equipmentType">
          <template>
            <el-select v-model="bindQuery.equipmentType" :placeholder="$t('financial.Please_select')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                value-format="timestamp">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item :label="$t('financial.Price')" prop="price">
         <el-input  clearable v-model="bindQuery.price" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Purchase_time')" prop="buyTime">
          <div class="block">
            <el-date-picker
              v-model="bindQuery.buyTime"
              type="datetime"
            :placeholder="$t('financial.Select_time')"
              value-format="timestamp">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading.add" @click="addWork">{{$t('financial.Add')}}</el-button>
      </div>
    </el-dialog>  
  <!--编辑弹窗-->
    <el-dialog :title="$t('financial.Edit')" :visible.sync="dialog.update">
      <el-form :model="bindQuery1" :rules='bindRules' ref="bindForm" label-position="right" label-width="120px"> 
        <el-form-item :label="$t('financial.Device_number')" prop="equipmentNumber">
          <el-input  clearable v-model="bindQuery1.equipmentNumber" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Device_type')" prop="equipmentType">
          <template>
            <el-select v-model="bindQuery1.equipmentType" :placeholder="$t('financial.Please_select')" @change="getType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item :label="$t('financial.Price')" prop="price">
         <el-input  clearable v-model="bindQuery1.price" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Purchase_time')" prop="buyTime">
          <div class="block">
            <el-date-picker
              v-model="bindQuery1.buyTime"
              type="datetime"
            :placeholder="$t('financial.Select_time')"
              value-format="timestamp">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading.add" @click="update">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>    
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getWorkListByPageCondition, addWork, updateWorkIsFlag, updateWork, getWorkInfo } from '@/api/financial'
export default {
  name: 'financial_back2',
  components: {
    CountTo,
  },
  data() {
    return {
      total: 0,
      parameter: '',
      date: '',
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        equipmentNumber: ''
      },
      list: null,
      loading: {
        list: false,
        download: false
      },
      dialog:{
        add:false,
        update:false
      },
      bindQuery:{
          equipmentNumber: '',
          equipmentType: '',
          price: '',
          buyTime: ''
      },
      bindQuery1: {
        equipmentNumber: '',
        equipmentType: '',
        price: '',
        buyTime: '',
        id: ''
      },
      bindRules:{
        equipmentNumber: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        equipmentType: [
          { required: true, message: '请输选择设备类型', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        buyTime: [
          { required: true, message: '请输入购买时间', trigger: 'blur' }
        ]
      },
      options: [{
        value: '1',
        label: '机柜'
      }, {
        value: '2',
        label: '充电宝'
      }],
      equipmentType:''
    }
  },
 
  created() {
    this.getWorkListByPageCondition()
  },
  methods: {
    //切换类型
    getType(val){
     this.equipmentType = val
    },
   //办公列表 
    async getWorkListByPageCondition() {
      this.loading.list = true
      try {
        const { data } = await getWorkListByPageCondition(this.listQuery)
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          ...item
        }))
        this.total = data.total
      } catch (error) {        
      }
      this.loading.list = false     
    },
  //新增办公
    async addWork() {
      console.log(this.bindQuery.equipmentType)
      try{
        const { data } = await addWork(this.bindQuery)
          this.$message({
            type: 'success',
            message: `新增成功!`
          });
          this.dialog.add = false
          this.loading.add = false
          this.getWorkListByPageCondition()
      }catch(error){
      }
    },
  //删除
    async updateWorkIsFlag(id) {
      try{
        const { data } = await updateWorkIsFlag({ id })
        this.$message({
          type: 'success',
          message: `删除成功!`
        });
        this.getWorkListByPageCondition()
      }catch(error) {
      }
    },
  //编辑
  async update() {    
    const { data } = await updateWork({...this.bindQuery1,equipmentType:this.equipmentType})
    this.$message({
      type: 'success',
      message: `修改成功!`
    });
    this.dialog.update = false
    this.getWorkListByPageCondition()
  },
    //编辑渲染数据
    editor(item) {
      this.dialog.update = true
      this.bindQuery1.id = item.id
      this.bindQuery1.equipmentNumber = item.equipmentNumber
      this.bindQuery1.equipmentType = item.equipmentType == 1 ? '机柜':'充电宝'
      this.equipmentType = this.options.filter(item=>item.label == this.bindQuery1.equipmentType)[0].value
      this.bindQuery1.price = item.price
      this.bindQuery1.buyTime = item.buyTime
    },
    handleFilter() {
      this.listQuery.pageNo = 1
     this.getWorkListByPageCondition()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getWorkListByPageCondition()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getWorkListByPageCondition()
    }
  }
}
</script>
